<template>
  <el-carousel
    v-bind="$attrs"
    :interval="props.interval"
    :type="props.type"
    :height="props.height"
  >
    <el-carousel-item
      v-for="item in list"
      :key="item.id"
      @click="imgClick(item)"
    >
      <img class="img" :src="getAssetImage(item.url)" alt="" />
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { swiperProps } from './props'

import type { CarouselItem } from './type'

const props = defineProps(swiperProps)
const emits = defineEmits({
  'img-click': (img) => !!img
})

const list = computed(() => props.carousel)

function getAssetImage(imgSrc: string) {
  return new URL(imgSrc, import.meta.url).href
}

function imgClick(item: CarouselItem) {
  emits('img-click', item)
}

defineOptions({
  name: 'CSwiper'
})
</script>

<style lang="scss" scoped>
.el-carousel {
  .img {
    width: 100%;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
